<template>
  <div>
    <Alert />
    <page-header title="开关" />
    <page-main title="基础用法" class="demo">
      <el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949" />
    </page-main>
    <page-main title="文字描述" class="demo">
      <el-switch v-model="value1" active-text="按月付费" inactive-text="按年付费" />
    </page-main>
    <page-main title="禁用状态" class="demo">
      <el-switch v-model="value2" disabled style="margin-right: 10px;" />
      <el-switch v-model="value3" disabled />
    </page-main>
  </div>
</template>

<script>
import Alert from './components/alert.vue'

export default {
  components: {
    Alert
  },
  data() {
    return {
      value: true,
      value1: true,
      value2: true,
      value3: false
    }
  }
}
</script>
